        <?
        require_once('header.php'); // uri  
        ?> 
         <link rel="stylesheet" href="css/mainpage.css"> 
        <link rel="stylesheet" href="css/showbook.css"> 
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
       	
        <div class="wrpOuter">
            <div class="wrpPage">
                 
                <?
        require_once('subheader.php'); // uri  
        ?>
        
                <div class="wrpOuterBody">
                    <div class="wrpBody clear">
                    <? 
                    require_once('menu.php'); // uri  
                    ?>
                        <!-- contentlist -->
                        <div class="wrpOuterContentList">
                            <div class="wrpInnerContentlist">
                                <!-- Banner -->
                                <div class="wrapAddBanner">
                                    <div class="addBanner">
                                        <div class="wrapBnDef">
                                            <div class="wrapTumbnlBnDef">
                                                <div class="upBnImg">
                                                    <img class="upBnImgA" src="img/ba1.jpg" alt="upimage">
                                                </div>
                                                <div class="upBnImg">
                                                    <img class="upBnImgA" src="img/ba2.jpg" alt="upimage">
                                                </div>
                                                <div class="upBnImg">
                                                    <img class="upBnImgA" src="img/ba3.jpg" alt="upimage">
                                                </div>
                                                <div class="upBnImg">
                                                    <img class="upBnImgA" src="img/ba4.jpg" alt="upimage">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="dotPageB">
                                        <div class="dotOutB dotBP1 dotInB"></div>
                                        <div class="dotOutB dotBP2 "></div>
                                        <div class="dotOutB dotBP3 "></div>
                                        <div class="dotOutB dotBP4 "></div>
                                    </div>
                                </div>
                                <!-- End Banner -->
                                <div class="navTopBar">
                                    <h2 class="tabShowTopBar">All Tags</h2>
                                    <div class="wrpSort">
                                        <div class="btnSort"><i></i><em>sort</em>
                                            <div class="wrpUllistSort">
                                                <ul class="ullisSort">
                                                    <li class="liSort"><div class="listSort">Date</div></li>
                                                    <li class="liSort"><div class="listSort">Price</div></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="wrpOuterListTile">
                                    <div class="wrpInnerListTile">
                                        <div class="tile">
                                            <div class="innerTile">
                                                <div class="wrpFtShow">
                                                    <div class="lfFt priceFt">14<em>$</em></div>
                                                    <div class="rfFt newFt">New</div>
                                                </div>  
                                                <div class="wrpImgTileOuter">                             
                                                    <a href="#" class="wrpImgTile">
                                                        <div class="imgTile clickImgTile">
                                                            <img class="imgTileCell" src="img/mocimagetile.png" alt="ImageTile">
                                                        </div>
                                                        <p class="pTile">A rhoncus phasellus et! Tortor risus et lectus, diam </p>
                                                    </a>
                                                </div>
                                                <div class="wrpUserTile">
                                                    <img class="imguserTileCell" src="img/mocimagetile.png" alt="ImageUser">
                                                    <p class="userNameTile">Joe Smith</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- show Book -->
        <div class="wrpShowlanding">
            <div class="overlayWhitBook"></div>
             <div class="popBook">
                <div class="wrpPopBookInner">
                    <div class="topBar">
                        <div class="wrapLeftIcon wrapIcon">
                            <i class="leftIcon iconTop"></i>
                        </div>
                        <div class="wrapRightIcon wrapIcon">
                            <i class="rightIcon iconTop"></i>
                        </div>
                        <div class="wrapCloseIcon wrapIcon">    
                            <i class="closeIcon iconTop"></i>
                        </div>
                    </div>
                    <div class="wrapShowBook">
                        <div class="wrapAuthor">
                            <p class="authorName">By 
                                <span>Myriam Joire</span>
                            </p>
                            <div class="wrapUpdateDate">
                                <i class="calendarIcon" id="edtibookset" ></i>
                                <i class="calendarIcon"></i>
                                <p class="updateDate">April 8, 2013</p>
                            </div>
                        </div>
                        <div class="showBook">
                            <h1 class="titleBook">The Engadget Interview: ARM president Simon Segers at MWC 2013, So what Do you thing about it?</h1>
                            <table class="typeSize">
                                <tr>
                                    <th>Book Type</th>
                                    <th>File Type</th>
                                    <th>File Size</th>
                                    <th>Price</th>
                                </tr>
                                <tr>
                                    <td class="column1">
                                        <p class="bookType">Magazine</p>
                                    </td>
                                    <td class="column2 icontypetd">
                                        <p class="fileType">.PDF</p>
                                    </td>
                                    <td class="column3">
                                        <p class="fileSize">300 MB</p>
                                    </td>
                                    <td class="column4">
                                        <p class="bookPrice">19.99$</p>
                                    </td>
                                </tr>
                            </table>
                            <p class="dsctBook">Lectus tristique amet eu, duis magnis integer mid montes cras scelerisque nisi amet vut quis turpis ut sed? Auctor sed turpis nisi magna mattis, ac. Enim, tortor aliquet magnis vel, integer sed. In cum pulvinar, mauris? Integer penatibus eu. Tempor? Risus vel? Tristique risus phasellus? Proin integer purus, tempor. Rhoncus, ridiculus parturient in, diam, porta scelerisque cras, elementum, enim mus sit amet in, mid, pid turpis nec platea in elit, ut duis, tempor magna non diam turpis! Egestas, etiam vel! Placerat ut adipiscing ut sed integer porta ut sit ut a eu, elit, urna egestas vel dignissim augue natoque augue? Porttitor magna sociis nunc augue, ac vel porta cum elementum ultrices. Elementum? Dignissim integer et velit lectus. Est integer. Nisi.</p>
                            <div class="gallerySceenShot">
                                <div class="wrpGallery">
                                    <div class="ctnGallery">
                                        <img class="imgGal imgGal1" src="img/ecco.jpg">
                                        <img class="imgGal imgGal2" src="img/mjs.jpg">
                                        <img class="imgGal imgGal3" src="img/sipt.jpg">
                                        <img class="imgGal imgGal4" src="img/kite660.jpg">
                                    </div>
                                </div>
                                <div class="dotPageS">
                                    <div class="dotOutS dotSP1 dotInS"></div>
                                    <div class="dotOutS dotSP2"></div>
                                    <div class="dotOutS dotSP3"></div>
                                    <div class="dotOutS dotSP4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        
        <script>
            $(function() {
                //left value = img width + margin-right
                $(".dotOutB").click(function() {
                    $(".dotOutB").addClass("dotInB").not(this).removeClass("dotInB");
                    switch (true) {
                      case $(this).hasClass('dotBP1'):
                            $(".wrapTumbnlBnDef").animate({
                                left: '0'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotBP2'):
                            $(".wrapTumbnlBnDef").animate({
                                left: '-805px'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotBP3'):
                            $(".wrapTumbnlBnDef").animate({
                                left: '-1610px'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotBP4'):
                            $(".wrapTumbnlBnDef").animate({
                                left: '-2415px'
                            }, 700 );
                            break;
                    }
                 });

                //clickCell for open landing
                $(".wrpImgTileOuter").click(function() { 
                    $(".wrpShowlanding").show();
                });

                //close landing
                $(".wrapCloseIcon").click(function() { 
                    $(".wrpShowlanding").hide();
                });


                //left value = img width + margin-right
                $(".dotOutS").click(function() {
                    $(".dotOutS").addClass("dotInS").not(this).removeClass("dotInS");
                    switch (true) {
                      case $(this).hasClass('dotSP1'):
                            $(".ctnGallery").animate({
                                left: '0'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotSP2'):
                            $(".ctnGallery").animate({
                                left: '-670px'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotSP3'):
                            $(".ctnGallery").animate({
                                left: '-1340px'
                            }, 700 );
                            break;
                      case $(this).hasClass('dotSP4'):
                            $(".ctnGallery").animate({
                                left: '-2010px'
                            }, 700 );
                            break;
                    }
                 });
            });
        </script>
       <?
        require_once('footer.php'); // uri  
        ?>